import * as React from 'react';
import Header from '@/commonComponents/header/Header';
import useAuth from '@/utils/hooks/useAuth';
import UserHeader from '@/commonComponents/userHeader/index';
import { List, Button, Dialog, Toast } from 'antd-mobile';
import { UnlockOutline } from 'antd-mobile-icons'
import { getToken, getUserInfo } from '../../utils/localStorge';
import { useNavigate } from 'react-router-dom';
import './index.module.scss';
const { useEffect, memo, useState } = React;

interface userInfo {
	avatar: string,
	username: string,
	token: string
}

function Setting() {
	const token = getToken();
	const [visible, setVisible] = useState(false)
	const { back } = useAuth();
	const navigate = useNavigate();
	var userInfo: userInfo = {
		avatar: '',
		username: '',
		token: ''
	}
	if (token) {
		var userInfo: userInfo = JSON.parse(getUserInfo());
	}
	const singOut = () => {
		localStorage.removeItem('ticketToken')
		localStorage.removeItem('userInfo')
		navigate('/user')
		setVisible(false)
	}

	return (
		<div styleName='setting-content'>
			<Header
				title={`设置`}
				onBack={back}
				style={{
					background: '#fff',
					color: '#333',
				}}
				type={1}
			/>
			<div styleName="top-avatar">
				<UserHeader username={userInfo.username} style={{ color: '#999' }} token={token} avatar={userInfo.avatar} />
			</div>
			<List>
				<List.Item prefix={<UnlockOutline />} onClick={() => { navigate('/confirmpwd') }}>
					修改密码
				</List.Item>
			</List>
			{/* <Button styleName='sign-out' fill='solid' onClick={() => singOut()}> 退出登录</Button> */}
			<Button styleName='sign-out' fill='solid' onClick={() =>
				Dialog.confirm({
					content: '你确定要退出吗',
					onConfirm: () => {
						singOut()
					},
				})
			}> 退出登录</Button>
		</div >
	)
}

export default memo(Setting);
